<template>
 <div class="wrapper">
     
  <div  class="page-loadmore">
        <Header></Header>
    <!-- <div class="page-title" style="text-align:center;">页面头部</div> -->
    <div class="page-loadmore-wrapper" ref="wrapper" :style="{ height: wrapperHeight + 'px' }">
      <!-- <mt-spinner v-show="list<1 && InitialLoading" color="#26a2ff"></mt-spinner> -->
      <mt-loadmore 
     
        @translate-change="translateChange"       
        :bottom-method="loadBottom" 
        @bottom-status-change="handleBottomChange" 
        :bottom-all-loaded="allLoaded" 
        :auto-fill="false" 
        ref="loadmore">

    <ul class="tab">
        <router-link to="/list/px_certif" tag='li' >资格认证</router-link>
        <router-link to='/list/px_cedu' tag='li' >继续教育</router-link>
        <router-link to='/list/px_active' tag='li' >活动沙龙</router-link>
        <router-link to='/list/px_meet' tag='li' >学术会议</router-link>
    </ul>
    <div class="banner">
        <mt-swipe :auto="2000" >
            <mt-swipe-item>
                <img src="../../assets/user-banner.png" alt="">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="../../assets/pay_adv.png" alt="">
            </mt-swipe-item>
            <mt-swipe-item>
                <img src="../../assets/my.png" alt="">
            </mt-swipe-item>
        </mt-swipe>
    </div>
    <ul class="nav">   
      <router-link to="" tag="li">
        <div class="">
          <img src="../../assets/train/friend.png" >
        </div>
        <span>邀请好友</span>
      </router-link>

      <router-link to="" tag="li">
        <div class="">
          <img src="../../assets/train/lesson.png">
        </div>
        <span>课程表</span>
      </router-link>

      <router-link to="" tag="li">
        <div class="">
          <img src="../../assets/train/data.png" >
        </div>
        <span>日历</span>
      </router-link>
      <router-link to="" tag="li">
        <div class="">
          <img src="../../assets/train/talk.png" >
        </div>
        <span>客服</span>
      </router-link>
    </ul>
    <div class="tuijian">
        <ul>
            <router-link v-for="i in tjlist" to='' tag='li'>
                <img src="../../assets/user-banner.png" alt="">
                <!-- <img :src="i.img" alt=""> -->
                <div class="tj-bot">
                    <p>{{i.title}}</p>
                    <p><span>{{i.add_time}}</span><span class="price">￥{{i.price}}</span></p>
                    <p>{{i.addr}}</p>
                </div>
            </router-link>
        </ul>
    </div>
    <div class="biaoqian">
        <ul>
            <router-link to="" tag="li">二级标签</router-link>
            <router-link to="" tag="li">二级标签</router-link>
            <router-link to="" tag="li">二级标签</router-link>
        </ul>
        <ul>
            <router-link to="" tag="li">二级标签</router-link>
            <router-link to="" tag="li">二级标签</router-link>
            <router-link to="" tag="li">二级标签</router-link>
        </ul>
    </div>
    <div class="huigu">
        <h1 class="title">
          往期课程回顾
          <router-link to=""></router-link>
        </h1>
        <ul>
          <router-link v-for="i in wqlist" to="" tag="li">
                <!-- <img src="../../assets/user-banner.png" alt=""> -->
                <img :src="'http://www.iepsy.com/'+i.img"  alt="">
                <div>
                    <p>{{i.title}}</p>
                    <p><span>讲师：</span>{{i.teacher}}</p>
                    <!-- <p>{{i.price}}</p> -->
                    <p class="price" v-text="$Price.getPrice(i.price)"></p>
                    <div class="hg-lastp">
                      <span>已报名：<i>0</i></span><span>新育学院</span>
                    </div>
                </div>
          </router-link>
        </ul>
    </div>
    <!-- <div class="mulu" style="min-height:200px"> -->
    <div class="mulu">
   
      <h1 class="title">目录</h1>
       <ul class="ul-box starth" id="ul-box">
       <router-link class="li-box" v-for="i in Data" to='' tag='li'>
                <img src="../../assets/user-banner.png" alt="">
                <!-- <img :src="i.img" alt=""> -->
                <div class="tj-bot">
                    <p>{{i.title}}</p>
                    <p><span>{{i.add_time}}</span><span class="price">￥{{i.price}}</span></p>
                    <p>{{i.addr}}</p>
                </div>
      </router-link>
      </ul>

    </div>

        <!-- :auto-fill="true" 时页面加载完毕时 默认执行loadBottom 值为false时 自己写一个加载 -->
       
           
      
       

        <!-- <div slot="top" class="mint-loadmore-top" style="text-align:center">
          <span v-show="topStatus !== 'loading'" :class="{ 'rotate': topStatus === 'drop' }">↓</span>
          <mt-spinner v-show="topStatus == 'loading'" color="#26a2ff"></mt-spinner>
        </div> -->

        <div v-if="allLoaded" style="text-align:center;">没有更多数据了</div>


        <div slot="bottom" class="mint-loadmore-bottom">
          <span v-show="bottomStatus !== 'loading'" :class="{ 'is-rotate': bottomStatus === 'drop' }">↑</span>
          <span v-show="bottomStatus === 'loading'">
            <mt-spinner v-show="bottomStatus == 'loading'" color="#26a2ff"></mt-spinner>
          </span>
        </div>


      </mt-loadmore>
    </div>
     <Footer></Footer>
  </div>

  </div>
</template>
<script>
import Header from "../../components/header.vue";
import Footer from "../../components/footer.vue";

export default {
  components: {
    Header,
    Footer
  },
  data() {
    return {
      tjlist: [], // 首页推荐数据
      wqlist: [], // 往期回顾数据

      pageNum: 1, //页码
      InitialLoading: true, //初始加载
    //   list: 0, //数据
      allLoaded: false, //数据是否加载完毕
      bottomStatus: "", //底部上拉加载状态
      wrapperHeight: 0, //容器高度
      topStatus: "", //顶部下拉加载状态
      translate: 0, //
      moveTranslate: 0,

      griddata: [], //每次加载出来的新数据
      Data: [] //每次加载累加后的总数据
    };
  },
  created() {
    this.getTuijian();
    this.getWangqi();
  },
  mounted() {
    let windowWidth = document.documentElement.clientWidth; //获取屏幕高度
    if (windowWidth > 768) {
      //这里根据自己的实际情况设置容器的高度
      this.wrapperHeight = document.documentElement.clientHeight - 130;
    } else {
      this.wrapperHeight = document.documentElement.clientHeight - 90;
    }
  },
  methods: {
    getTuijian() {
      this.$axios
        .get("http://39.104.90.182:80/px/service/px/index_tj.json")
        .then(res => {
          console.log(res);
          this.tjlist = res.data;
        });
    },
    getWangqi() {
      this.$axios
        .get("http://39.104.90.182:80/px/service/px/index_course.json")
        .then(res => {
          console.log(res);
          this.wqlist = res.data;
        });
    },
    getAll() {
      var _this = this;
      this.$axios
        .get("http://39.104.90.182:80/px/service/px/list_list.json", {
          params: {
            page: _this.pageNum
          }
        })
        .then(res => {
          console.log(res);
        //   console.log(res.data.list);
        // 把获取的新的分页数据push到总数据中
          this.alllist = res.data.list;
          let len=this.alllist.length;

          for (let i = 0; i < len; i++) {
            this.Data.push(this.alllist[i]); //将新数据push到Data中
          }
          this.pageNum += 1;

        });
    },
    handleBottomChange(status) {
      this.moveTranslate = 1;
      this.bottomStatus = status;
    },
    loadBottom() {
      this.handleBottomChange("loading"); //上拉时 改变状态码

      console.log("我开始拉了");
      this.getAll();
      
      console.log(this.pageNum);

      setTimeout(() => {
        //上拉加载更多 模拟数据请求这里为了方便使用一次性定时器
        this.handleBottomChange("loadingEnd"); //数据加载完毕 修改状态码
        this.$refs.loadmore.onBottomLoaded();

      }, 1500);
    },
    handleTopChange(status) {
      this.moveTranslate = 1;
      this.topStatus = status;
    },
    translateChange(translate) {
      const translateNum = +translate;
      this.translate = translateNum.toFixed(2);
      this.moveTranslate = (1 + translateNum / 70).toFixed(2);
    }
    // loadTop() {
    //   //下拉刷新 模拟数据请求这里为了方便使用一次性定时器
    //   this.handleTopChange("loading"); //下拉时 改变状态码
    //   this.pageNum = 1;
    //   this.allLoaded = false; //下拉刷新时解除上拉加载的禁用
    //   setTimeout(() => {
    //     this.list = 12; //下拉刷新 数据初始化
    //     this.handleTopChange("loadingEnd"); //数据加载完毕 修改状态码
    //     this.$refs.loadmore.onTopLoaded();
    //   }, 1500);
    // }
  }
};
</script>
<style lang="scss">
@import "../../style/common.scss";
@import "../../style/scroll.scss";
.wrapper {
  width: 100%;
  font-size: 0.3rem;
  .tab {
    display: flex;
    padding: 10px 0;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      line-height: 0.75;
      font-size: 0.28rem;
      font-weight: 500;
      //   color: #333;
      border-right: 2px solid #ccc;
      &:nth-child(4) {
        border: none;
      }
    }
  }
  .banner {
    height: 2rem;
  }
  .nav {
    display: flex;
    padding: 10px 0;
    li {
      display: flex;
      flex-direction: column;
      align-items: center;
      flex: 1;
      line-height: 1;
      img {
        width: 0.7rem;
        height: 0.7rem;
      }
    }
    span {
      font-size: 0.3rem;
    }
  }
  .tuijian {
    padding-top: 10px;
    background-color: #f1f1f1;
    li {
      box-sizing: border-box;
      padding: 0 10px 10px;
      background-color: #fff;
      margin-top: 10px;
      img {
        width: 100%;
        height: 4rem;
        background-color: red;
      }
      .tj-bot {
        font-size: 0.3rem;
        p {
          margin-top: 5px;
          &:nth-child(1) {
            font-weight: 900;
          }
          &:nth-child(2) {
            display: flex;
            //   flex-direction:column;
            justify-content: space-between;
            .price {
              color: red;
              font-weight: 900;
            }
          }
        }
      }
    }
  }
  .biaoqian {
    width: 100%;
    background-color: #f1f1f1;
    padding-top: 10px;
    ul {
      background-color: #fff;
      display: flex;
      flex-direction: row;
      align-items: center;
      flex: 1;
      justify-content: space-around;
      border-top: 1px solid #ccc;
      font-weight: 900;
      li {
        width: 33%;
        text-align: center;
        border-right: 1px solid #ccc;
        padding: 10px 0;
        &:last-child {
          border: none;
        }
      }
    }
  }
  .huigu {
    h1 {
      height: 1rem;
      background: url(../../assets/train/bg.png) no-repeat;
      background-size: 100%;
      color: #fff;
      text-align: center;
      line-height: 1rem;
      font-size: 0.3rem;
      font-weight: 900;
      position: relative;
      a {
        position: absolute;
        display: inline-block;
        top: 50%;
        left: 70%;
        transform: translate(-50%, -50%);
        width: 0.7rem;
        height: 0.3rem;
        background: url(../../assets/train/more.png) no-repeat;
        background-size: 100%;
      }
    }
    ul {
      background-color: #f1f1f1;
      li {
        display: flex;
        width: 100%;
        flex-direction: row;
        padding: 10px 10px;
        background-color: #fff;
        margin-bottom: 10px;
        img {
          width: 120px;
          height: 80px;
          margin-right: 10px;
        }
        div {
          width: 100%;
          display: flex;
          flex-direction: column;
          justify-content: space-between;
          font-size: 0.25rem;
          p {
            &:first-child {
              font-size: 0.3rem;
              font-weight: 900;
            }
          }
          .price {
            color: #16c447;
          }
          .hg-lastp {
            display: flex;
            flex-direction: row;
            justify-content: space-between;
          }
        }
      }
    }
  }
  .mulu {
    // margin-bottom: 6rem;
    h1 {
      height: 1rem;
      background: url(../../assets/train/bg.png) no-repeat;
      background-size: 100%;
      color: #fff;
      text-align: center;
      line-height: 1rem;
      font-size: 0.3rem;
      font-weight: 900;
      position: relative;
    }
    padding-top: 10px;
    background-color: #f1f1f1;
    li {
      box-sizing: border-box;
      padding: 0 10px 10px;
      background-color: #fff;
      margin-top: 10px;
      img {
        width: 100%;
        height: 4rem;
        background-color: red;
      }
      .tj-bot {
        font-size: 0.3rem;
        p {
          margin-top: 5px;
          &:nth-child(1) {
            font-weight: 900;
          }
          &:nth-child(2) {
            display: flex;
            //   flex-direction:column;
            justify-content: space-between;
            .price {
              color: red;
              font-weight: 900;
            }
          }
        }
      }
    }
  }
}
</style>
